<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
    <meta name="renderer" content="webkit">
    <!--国产浏览器高速模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 定义页面的最新版本 -->
    <meta name="description" content="网站简介"/>
    <!-- 网站简介 -->
    <meta name="keywords" content="搜索关键字，以半角英文逗号隔开"/>
    <title>最家出品</title>

    <!-- 公共样式 开始 -->
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../../css/iconfont.css">
    <script type="text/javascript" src="../../framework/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <!-- 滚动条插件 -->
    <link rel="stylesheet" type="text/css" href="../../css/jquery.mCustomScrollbar.css">
    <script src="../../framework/jquery-ui-1.10.4.min.js"></script>
    <script src="../../framework/jquery.mousewheel.min.js"></script>
    <script src="../../framework/jquery.mCustomScrollbar.min.js"></script>
    <script src="../../framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
    <!-- 公共样式 结束 -->

    <style>
        .layui-form-label {
            width: 100px;
        }

        .layui-input-block {
            margin-left: 130px;
        }

        .layui-form {
            margin-right: 30%;
        }
    </style>

</head>

<body>
<div class="cBody">
    <form id="addForm" class="layui-form" action="/addProduct"  method="post" enctype="multipart/form-data">
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input type="text" name="productName" required lay-verify="required" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <!--<div class="layui-form-item">-->
            <!--<label class="layui-form-label">商品图片</label>-->
            <!--<div class="layui-upload-drag" id="goodsPic" >-->
                <!--<i class="layui-icon" type="file" name="avatar"></i>-->
                <!--<p>点击上传，或将文件拖拽到此处</p>-->
                <!--&lt;!&ndash;<input type="file" name="avatar">&ndash;&gt;-->
            <!--</div>-->
        <!--</div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">商品图片</label>
            <div class="layui-input-block">
                <input type="file" name="avatar" required lay-verify="required" autocomplete="off"
                       class="layui-input"
                style="background-color: white;height: 140%;">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">参考价格</label>
            <div class="layui-input-block">
                <input type="text" name="productPrice" required lay-verify="required|number" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">销量</label>
            <div class="layui-input-block">
                <input type="text" name="productSales" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">库存</label>
            <div class="layui-input-block">
                <input type="text" name="productRepertory" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">原材料</label>
            <div class="layui-input-block">
                <input type="text" name="rawMaterial" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品简介</label>
            <div class="layui-input-block">
                <textarea name="productIntro" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">分类</label>
            <div class="layui-input-inline">
                <select name="firstLevel" id="provid" lay-filter="provid">
                    <option value="">一级分类</option>
                    <option name="categoryName" value="装饰摆件">装饰摆件</option>
                    <option name="categoryName" value="布艺软式">布艺软式</option>
                    <option name="categoryName" value="墙式壁挂">墙式壁挂</option>
                    <option name="categoryName" value="蜡艺香薰">蜡艺香薰</option>
                    <option name="categoryName" value="创意家居">创意家居</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit  type="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>


    <script type="text/javascript">
        $(function (){
            $("[name=firstLevel]").change(function (e) {
                //获取到被选中的option的value
                var categoryName = $("[name=firstLevel]").val();
                var selecteSL = $("[name=secLevel]");
                if (!categoryName) {
                    //根据value找到二级列表
                    $.ajax('secondLevel', {
                        type: "get",
                        dataType: "json",
                        data: {"categoryName": categoryName},
                        success: function (result) {
                            console.log(result);
                            if(result.success){
                                var dataArr = result.data;
                                selecteSL.empty();
                                for(var i=0;i<dataArr.length;i++){
                                    $("<option>").text(dataArr[i]).appendTo(selecteSL);
                                }
                            }
                        },
                        error: function (xhr, msg, e) {
                            console.log("请求失败" + msg)
                        }
                    });
                }

            });
        });


        layui.use(['upload', 'form'], function () {
            var form = layui.form;
            var upload = layui.upload;
            var layer = layui.layer;
            //监听提交

            form.verify({
                //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                ZHCheck: [
                    /^[\u0391-\uFFE5]+$/
                    , '只允许输入中文'
                ]
            });

        });
    </script>

</div>
</body>

</html>